<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tju志愿服务管理</title>
    <meta name="description" content="01">
    <meta name="keywords" content="02">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
    <script src="js/remScale.js"></script>
</head>

<body>
    <div class="container">
        <header class="header">
            <div class="wrap">
                <h1>
                    <a href="#">
                        <img src="images/index_images/logo.jpg">
                    </a>
                </h1>
                <input type="text" placeholder="寻找志愿活动">
                <div class="points">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </header>
        <nav class="nav">
            <div class="wrap">
                <ul>
                    <li class="first">
                        <a href="#">推荐</a>
                    </li>
                    <li>
                        <a href="#">找活动</a>
                    </li>
                    <li>
                        <a href="#">找组织</a>
                    </li>
                    <li>
                        <a href="#">身边公益</a>
                    </li>
                    <li>
                        <a href="#">第二课堂</a>
                    </li>
                    <li>
                        <a href="#">美食</a>
                    </li>
                    <li>
                        <a href="#">美食</a>
                    </li>

                </ul>
                <span class="arrow">
                    <img src="images/index_images/arrow.jpg">
                </span>
            </div>
        </nav>
        <div class="banner">
            <a href="#"><img src="images/index_images/event1.jpg"></a>

        </div>
        <div class="flex-nav">
            <div class="item ">
                <a href="event.html">
                    <img src="images/index_images/icon_1.jpg">
                    <p>限时活动</p>
                </a>
            </div>
            <div class="item ">
                <a href="#">
                    <img src="images/index_images/icon_2.jpg">
                    <p>暖冬义卖</p>
                </a>
            </div>
            <div class="item ">
                <a href="#">
                    <img src="images/index_images/icon_3.jpg">
                    <p>公益之声</p>
                </a>
            </div>
            <div class="item ">
                <a href="#">
                    <img src="images/index_images/icon_4.jpg">
                    <p>记录证明</p>
                </a>
            </div>

        </div>

        <div class="banner2">
            <a href="#">
                <img src="images/index_images/img.png" style="max-width: 100%;">
            </a>
        </div>

        <div class="goods">
            <ul class="hot-nav clearfix">
                <li><a>热门标签</a></li>
                <li class="del-l"><a>首页精选</a></li>
                <li class="del-l"><a>组织入驻</a></li>
                <li class="del-l"><a>公益传播</a></li>
            </ul>

            <div class="good clearfix">
                <div class="left">
                    <a href="event.html"><img src="images/index_images/event2.png"></a>
                </div>
                <div class="right">
                    <p class="title">团结屯社区志愿服务</p>
                    <p class="price">2024.01.01 - 01.03</p>
                    <p class="count">招募人数（8/20）</p>
                    <div class="btn">立即报名</div>
                </div>
            </div>



        </div>
        <!--页脚-->
        <div class="fixed-menu">
            <div class="con">
                <nav class="nav">
                    <a href="index.html">
                        <i></i>首页
                    </a>
                    <a href="List.html">
                        <i></i>公益圈
                    </a>
                    <a href="order.html">
                        <i></i>我的
                    </a>
                </nav>
            </div>
        </div>
    </div>

</body>

</html>
